<template>
    <div class="navbar">
        <div id="nav-m" class="nav">
            <!-- 商品分类列表 -->
            <div class="w">
                <ul class="wlist">
                    <li>
                        <a href="/home" class="router">首页</a>
                    </li>
                    <li>
                        <a href="/news" class="router">全部商品</a>
                    </li>
                    <li>
                        <a href="/team" class="router">商品分类</a>
                    </li>
                    <li>
                        <a href="/about" class="router"></a>
                    </li>
                    <li>
                        <a href=""></a>
                    </li>
                    <li>
                        <a href=""></a>
                    </li>
                    <li>
                        <a href=""></a>
                    </li>
                    <li>
                        <a href=""></a>
                    </li>
                </ul>
            </div>


        </div>
    </div>
</template>
<script>
 function getSrolltop(){
                let scrollTop = 0;
                if(document.documentElement&&document.documentElement.scrollTop){
                    scrollTop = document.documentElement.scrollTop;
                }else if(document.body){
                    scrollTop = body.scrollTop;
                }
                return scrollTop;
            }
            let nav_dom=document.getElementById("nav-m");
			window.onscroll = function() {
				if(getSrolltop() > 30) {
					nav_dom.className = "nav fixd";
				} else {
					nav_dom.className = "nav";
				}
            }
</script>
<style lang="scss" scoped>
.nav{
            background-color: rgb(247, 247,247);
            height: 90px;
            box-shadow:0px 1px 2px -1px rgb(247, 247,247);
            display: flex;
            align-items: center;
        }
        .fixd{
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            width: 100%;
            height: 80px;
            background-color:rgb(247, 247,247);
            border:1 solid rgb(237, 237,237);
        }
        .w{
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            line-height: 28px;
        }
        .wlist{
            
            display: flex;
            align-items:center;
        }
        .wlist li{
            height: 28px;
            line-height: 28px;
            display: flex;
            
            padding-left: 30px;
            
        }
        .wlist li:first-child{
            
            padding-left: 15px;
            font-weight: bold;
        }
        .wlist li::before{
            content: ' ';
            position: absolute;
            left: 0;
            top: 13px;
            width: 2px;
            height: 2px;
            background: #bdbdbd;
            
        }
        .wlist li  a{
            text-decoration:none ;
            color: #646464;
        }
        .wlist li a:hover{
            color: rgb(75, 64, 224);
        }
</style>
